var webpack = require('webpack');
var path = require('path');
// 快速生成html页面
var HtmlwebpackPlugin = require('html-webpack-plugin');
// 独立打包样式文件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
// 解决html文件的版本号
var AssetsPlugin = require('assets-webpack-plugin');
// css3自动加前缀
var autoprefixer = require('autoprefixer');

//自定义"魔力"变量
var definePlugin = new webpack.DefinePlugin({
    __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'false')),
    __PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false'))
});

//定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname);
var SRC_PATH = path.resolve(ROOT_PATH, './src');
// var APP_PATH = path.resolve(ROOT_PATH, './js/entry.js');
var BUILD_PATH = path.resolve(ROOT_PATH, './build');

// node_modules reactl路径  
var node_modules = path.resolve(__dirname, 'node_modules');
var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');
var pathToMoment = path.resolve(node_modules, 'moment/min/moment.min.js');

var web_modules = path.resolve(__dirname, 'web_modules');

var config = {
    //上下文
    // context: __dirname + '',
    debug: true,
    // 启用source-map
    devtool: 'eval-source-map',
    //插件项
    plugins: [
        new webpack.BannerPlugin('This file is created by zhaoda'),
        //公用模块
        new webpack.optimize.CommonsChunkPlugin('js_dev/common.js', ['ery']),
        // 自动生成一个html文件
        new HtmlwebpackPlugin(),
        new HtmlwebpackPlugin({
            title: 'Hello World app',
            filename: 'page/home.html',
            //chunks这个参数告诉插件要引用entry里面的哪几个入口
            // chunks: ['app', 'vendors'],
            template: 'src/html/index_dev.html',
            //要把script插入到标签里
            inject: true,
            // favicon: '../'
            minify: {
                // removeComments: true, //移除HTML中的注释
                // collapseWhitespace: true //删除空白符与换行符
            },
            hash: true,
            showErrors: true
        }),
        // new webpack.optimize.UglifyJsPlugin({ //压缩代码  丑化js 混淆代码而用
        //     compress: {
        //         warnings: false
        //     },
        //     except: ['$super', '$', 'exports', 'require', 'render'] //排除关键字
        // }),
        // 内联css提取到单独的styles的css
        // new ExtractTextPlugin("css/style.css"),
        // 
        new ExtractTextPlugin("css/[name].css?[hash]-[chunkhash]-[contenthash]-[name]", {
            disable: false,
            allChunks: true
        }),
        new AssetsPlugin({
            filename: 'build/page/webpack.assets.js',
            processOutput: function(assets) {
                return 'window.WEBPACK_ASSETS = ' + JSON.stringify(assets);
            }
        }),
        // function() {
        //     this.plugin("done", function(stats) {
        //         require("fs").writeFileSync(
        //             path.join(__dirname, "...", "stats.json"),
        //             JSON.stringify(stats.toJson()));
        //     });
        // },

        // 去除多个文件中的频繁依赖
        //设置此处，则在JS中不用类似require('./base')引入基础模块， 只要直接使用Base变量即可
        //此处通常可用做，对常用组件，库的提前设置
        new webpack.ProvidePlugin({
            'Moment': 'moment',
            "$": "jquery",
            "jQuery": "jquery",
            "window.jQuery": "jquery",
            "React": "react",
            "window.React": "react",
        }),
        // new webpack.LoaderOptionsPlugin({
        //     options: {
        //         postcss: [autoprefixer({ browsers: ['last 5 versions', 'ie 6-8', '> 1%'] })],
        //         devServer: {
        //             // port: 8000,
        //             // contentBase: './build/page/', //本地服务器所加载的页面所在的目录
        //             historyApiFallback: true, //不跳转
        //             colors: true, //终端中输出结果为彩色
        //             hot: true,
        //             inline: true, //实时刷新
        //             progress: true,
        //         },
        //     }
        // }),
        //定义全局变量
        definePlugin,
        // 报错但不退出webpack进程
        new webpack.NoErrorsPlugin(),
        // 查找相等或近似的模块，避免在最终生成的文件中出现重复的模块
        new webpack.optimize.DedupePlugin(),
    ],
    //页面入口文件配置
    entry: {
        // 其他库
        vendors: ['jquery', 'react'], //react
        bundle: [
            // 'webpack-dev-server/client?http://localhost:8080',
            // 'webpack/hot/dev-server',
            SRC_PATH + '/js/entry.js',
            //支持数组形式，将加载数组中的所有模块，但以最后一个模块作为输出  
            SRC_PATH + '/js/ery.js',
        ],
        // main : SRC_PATH + '/js/main.js',
    },
    //入口文件输出配置
    output: {
        // path: __dirname,
        // path: path.resolve(__dirname, './build'),
        // 打包文件存放的绝对路径
        path: BUILD_PATH,
        // publicPath:网站运行时的访问路径
        // publicPath: "/output/",
        // [chunkhash:8] 自动生成版本号
        filename: '/js_dev/[name]-[chunkhash:8]-[id].js',
        libraryTarget: 'umd',
        chunkFilename: "/js_dev/[name]-[chunkhash:8].js",
    },
    module: {
        //加载器配置
        //loader 
        //css-loader来处理css文件
        loaders: [

            //.js 文件使用 jsx-loader 来编译处理
            // {
            //     test: /\.js$/,
            //     loader: 'jsx-loader?harmony?babel',
            //     exclude: /node_modules/, // 匹配不希望处理文件的路径
            // }, 
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }, {
                test: /\.js$/,
                exclude: [node_modules],
                loader: 'babel'
            }, {
                test: /\.jsx?$/, // 用正则来匹配文件路径，这段意思是匹配 js 或者 jsx
                loader: 'babel' // 加载模块 "babel" 是 "babel-loader" 的缩写
            },
            // { test: /\.css$/, loader: 'style!css' },
            //.css 文件使用 style-loader 和 css-loader 来处理
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader!postcss-loader!',
                exclude: /node_modules/, // 匹配不希望处理文件的路径
                // loader: 'babel-loader',
                // include: path.resolve('');
            },
            // {
            //     test: /\.css$/,
            //     loader: ExtractTextPlugin.extract('style-loader', 'css-loader?-convertValues')
            // }, 
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract(
                    'css?sourceMap!' +
                    'less?sourceMap!' +
                    // 'autoprefixer?sourceMap'
                    'postcss?sourceMap'
                ),
                // loader: "style-loader!css-loader!postcss-loader!less-loader",
                exclude: /node_modules/, // 匹配不希望处理文件的路径
            },
            //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
            {
                test: /\.scss$/,
                loader: 'style!css!sass?sourceMap',
                exclude: /node_modules/, // 匹配不希望处理文件的路径
            },
            //图片文件使用 url-loader 来处理，小于8kb的直接转为base64
            // { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' },
            {
                test: /.(png|jpg)$/,
                loader: 'url?limit=8192&name=images/[hash:8].[name].[ext]',
                exclude: /node_modules/, // 匹配不希望处理文件的路径
            }, {
                test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url?limit=10000&minetype=application/font-woff'
            }, {
                test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url?limit=10&minetype=application/font-woff'
            }, {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url?limit=10&minetype=application/octet-stream'
            }, {
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'file'
            }, {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url?limit=10&minetype=image/svg+xml'
            },
            // 将jQuery暴露到全局:
            {
                test: web_modules + 'jquery-1.11.2.min.js',
                loader: 'expose?jQuery'
            },
        ]
    },
    postcss: [autoprefixer({ browsers: ['last 5 versions', 'ie 6-8', '> 1%'] })],
    devServer: {
        // port: 8000,
        // contentBase: './build/page/', //本地服务器所加载的页面所在的目录
        historyApiFallback: true, //不跳转
        colors: true, //终端中输出结果为彩色
        hot: true,
        inline: true, //实时刷新
        progress: true,
    },
       //其它解决方案配置
    resolve: {
        // 查找module的话从这里开始查找
        // root: 'E:/github/flux-example/src', //绝对路径
        root: '/Users/yanhaijiang/Desktop/wabpack',
        // 指明程序自动补全识别哪些后缀
        extensions: ['', '.coffee', '.js', 'jsx', '.es6', 'css', '.json', '.scss', 'png', 'jpg', 'jpeg'],
        // 模块别名定义，方便后续直接引用别名，无须多写长长的地址
        alias: {
            // AppStore: 'src/js/stores/AppStores.js',
            // ActionType: 'src/js/actions/ActionType.js',
            // AppAction: 'src/js/actions/AppAction.js',
            Director: 'web_modules/director.js',
            jquery: 'web_modules/jquery-1.11.2.min.js',
            react: pathToReact,
            moment: pathToMoment
        }
    },
    //添加了此项，则表明从外部引入，内部不会打包合并进去
    externals: {
        // jquery: 'jQuery',
        // react: 'React',
        //...
    }

}

module.exports = config;
